<template>
    <div>
        <ul class="menu_top_list ">
            <li @click="add()">
                <span class="iconfont icon-fanhui"></span>
            </li>
            <li>
                <div class="input">
                    <i class="iconfont icon-B1"></i>
                    <input type="text" placeholder="我的猫咖" v-model="text" @keydown="textIsSet" @blur="focusState = false"
                        v-focus="focusState" />
                </div>
            </li>
            <li>
                <input type="submit" value="搜索" class="btn" @click="onSubmit">
            </li>

        </ul>
        <div class="mag20 md-result">
            <!-- 历史记录 -->
            <div class="history">
                <div class="historyName">历史记录
                    <span @click="de">清除</span>
                </div>
                <div class="historylist" v-for="(item, index) in historyList" :key="index">
                    <span @click="name">{{ item.name }}</span>
                    <i class="iconfont icon-cuowu" @click="del(index)"></i>
                </div>
            </div>
            <router-link to="allClass">
                <div class="hotsearch" id="newhotsearch" style="">
                    <div class="tit">热搜榜</div>
                    <ul id="hotsearchtxt">
                        <li><i>1</i><span>造梦无双</span></li>
                        <li><i>2</i><span>全民枪神:边境王者</span></li>
                        <li><i>3</i><span>羊了个咩大闯关</span></li>
                        <li><i>4</i><span>皇帝成长计划2H5</span></li>
                        <li><i>5</i><span>斗罗大陆</span></li>
                        <li><i>6</i><span>三国哈哈哈</span></li>
                        <li><i>7</i><span>街篮高手</span></li>
                        <li><i>8</i><span>全民甜品</span></li>
                        <li><i>9</i><span>魔镜物语</span></li>
                        <li><i>10</i><span>零之战线</span></li>
                        <li><i>11</i><span>我的猫咖</span></li>
                        <li><i>12</i><span>傲笑江湖</span></li>
                    </ul>
                </div>
            </router-link>

        </div>

    </div>
</template>
<script>
import { allGame } from '@/api/home';


export default {
    data() {
        return {
            text: "",
            show: false,
            newVip: null,
            historyList: [],
            list: [],
            inputValue: "",
            cartoonList: [],
            isShow: false,
            focusState: false,

        };

    },
    mounted() { },
    methods: {
        //搜索
        //搜索
        textIsSet(e) {
            if (this.text == "") {

                if (e.keyCode == 13) {
                    console.log(this.text = '我的猫咖');
                }
            } else {
                if (e.keyCode == 13) {
                    // this.historyList.push({name:this.text})
                    console.log(this.historyList);
                    this.$store.commit("historyFun", { name: this.text });
                    this.cartoonList.map(item => {
                        if (item.title.indexOf(this.text) !== -1 || item.category.indexOf(this.text) !== -1) {
                            this.list.push(JSON.parse(JSON.stringify(item)));
                            console.log("index", this.list);

                            this.$router.push({ path: '/searchList', query: { key: this.text } })

                        } 

                    })


                    this.text = "";
                }
            }
        },
        onSubmit() {
            if (this.text == "") {
                console.log(this.text = '我的猫咖');
            } else {

                // this.historyList.push({name:this.text})
                // console.log(this.historyList);
                this.$store.commit("historyFun", { name: this.text });
                this.cartoonList.map(item => {
                    if (item.title.indexOf(this.text) !== -1 || item.category.indexOf(this.text) !== -1) {
                        this.list.push(JSON.parse(JSON.stringify(item)));
                        console.log("index", this.list);
                        this.$router.push({ path: '/searchList', query: { key: this.text } })

                    }

                })
                this.text = "";


            }


        },
        add() {
            this.$router.go(-1)

        },
        de() {
            // 清空
            this.$store.commit("deFun")
            // this.historyList.length=0
            // this.historyList.filter(item.name)
            console.log(this.historyList);
        },
        //删除
        del(index) {
            // this.historyList.splice(index, 1)
            this.$store.commit("delhistoryFun", index)

        },
        //点击历史的
        name(e) {
            this.text = e.target.innerText
            this.focusState = true
        },
    },

    created() {
        this.historyList = this.$store.state.historyList;
        allGame().then((data) => {
            let arr = data.data;
            const map = new Map()

            this.cartoonList = arr.filter(key => !map.has(key.id) && map.set(key.id, 1)) // 这里对name属性进行去重


        });
    },
    directives: {
        focus: {
            //根据focusState的状态改变是否聚焦focus
            update: function (el, value) {    //第二个参数传进来的是个json
                if (value) {
                    el.focus()
                }
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.md-result .hotsearch li:nth-child(3) i {
    color: #ffbc64;
    font-weight: 800;
}

.md-result .hotsearch li:nth-child(2) i {
    color: #fc8238;
    font-weight: 800;
}

.md-result .hotsearch span {
    font-size: 14px;
    padding-right: 20px;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
    box-sizing: border-box;
}

.md-result .hotsearch li:nth-child(1) i {
    color: #f35959;
    font-weight: 800;
}

.md-result .hotsearch li i {
    font-size: 13px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    color: #959595;
    width: 10%;
    text-align: center;
}

.md-result .hotsearch li {
    float: left;
    width: 50%;
    margin: 9px 0 0;
    height: 25px;
    line-height: 25px;
    box-sizing: border-box;
}

.md-result .hotsearch ul {
    overflow: hidden;
}

.md-result .tit {
    color: #333333;
    font-size: 15px;
    font-weight: bold;
}

.md-result .hotsearch {
    margin-top: 30px;
}

.mag20 {

    margin: 48px 10px;
}

.history {
    border-bottom: 1px solid #e2e2e2;
    padding-top: 20px;
    padding-bottom: 10px;
    margin: 0 8px;

    .historyName {
        padding-left: 15px;
        font-size: 14px;
        color: #666;
        padding-bottom: 10px;

        span {
            float: right;
            font-size: 14px;
            color: #00cc7d
        }
    }

    .historylist {
        display: flex;
        justify-content: space-between;
        padding: 0 16px 10px 16px;
    }
}

.btn {
    display: block;
    position: absolute;
    top: 8px;
    right: 12px;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #00cc7d;
    font-size: 15px;
    background: none;
    border: none;
}

.input {

    width: 100%;
    position: relative;
    display: flex;
    align-items: center;


    i {
        position: absolute;
        font-size: 20px;
        padding-left: 10px;
        color: black;
    }

    input {
        color: #68685f;
        width: 100%;
        padding: 6px 0;
        border-radius: 15px;
        border: transparent;
        background-color: #eff0f2;
        text-indent: 38px;
    }
}

.menu_top_list {
    max-width: 500px;
    margin: 0 auto;
    position: fixed;
    height: 48px;
    width: 100%;
    background-color: white;
    color: #333;
    font-size: 13px;


    z-index: 90;
    top: 0;
}

.menu_top_list li+li {
    width: 67%;
    -webkit-box-pack: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.menu_top_list li {
    float: left;
    display: -webkit-box;
    -webkit-box-align: center;
    height: 48px;
}

.menu_top_list li:first-child {
    cursor: pointer;
    width: 15%;
    color: #BFBFBF;
    font-size: 20px
}

.menu_top_list li:last-child {
    width: 18%;
}

.menu_top_list li:first-child::before {
    background: url("https://rs.sfacg.com/web/m/images/menu_top_icon.png") no-repeat -49.216px 9.96px;
    background-size: 105.462px;
    content: "";
    height: 48px;
    width: 24.608px;
    display: block;
}
</style>